<template>
  <div class="home">
    <el-card shadow="never">
      <div id="orders_back">
        <span > <el-button round size="mini" icon="el-icon-arrow-left" @click="back">返回</el-button></span> 
      </div>
       <div id="orders_header">
            <p><span class="orders_details">订单详情</span><span class="orders_payment">待付款</span></p>
            <p >
<!-- 设为已付款 -->
             <!-- Form -->
                <el-button class="orders_button" type="primary" @click="dialogFormVisible1 = true" size="mini">设为已付款</el-button>
                <el-dialog title="确认提示" :visible.sync="dialogFormVisible1" width="30%" >
                  <el-form :model="form">
                    <el-form-item label="设为已付款" :label-width="formLabelWidth">
                      <el-input v-model="form.paid_name" autocomplete="off" placeholder="请输入备注信息"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="Set_to_paid_f" >取 消</el-button>
                    <el-button type="primary" @click="Set_to_paid_t">确 定</el-button>
                  </div>
                </el-dialog>

<!-- 设为已发货  -->
                <el-button  class="orders_button" type="primary" @click="dialogFormVisible2 = true" size="mini">设为已发货</el-button>
                <el-dialog title="确认提示" :visible.sync="dialogFormVisible2" width="30%" >
                  <el-form :model="form">
                    <el-form-item label="设为已发货" :label-width="formLabelWidth">
                      <el-input v-model="form.shipped_name" autocomplete="off" placeholder="请输入备注信息"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="Set_as_shipped_f" >取 消</el-button>
                    <el-button type="primary" @click="Set_as_shipped_t">确 定</el-button>
                  </div>
                </el-dialog>

<!-- 设为已完成 -->
                <el-button class="orders_button" type="primary" @click="dialogFormVisible3 = true" size="mini">设为已完成</el-button>
                <el-dialog title="确认提示" :visible.sync="dialogFormVisible3" width="30%" >
                  <el-form :model="form">
                    <el-form-item label="设为已完成" :label-width="formLabelWidth">
                      <el-input v-model="form.completed_name" autocomplete="off" placeholder="请输入备注信息"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="Set_to_completed_f" >取 消</el-button>
                    <el-button type="primary" @click="Set_to_completed_t">确 定</el-button>
                  </div>
                </el-dialog>

<!-- 设为已核销 -->
                <el-button class="orders_button" type="primary" @click="dialogFormVisible4 = true" size="mini">设为已核销</el-button>
                <el-dialog title="确认提示" :visible.sync="dialogFormVisible4" width="30%" >
                  <el-form :model="form">
                    <el-form-item label="设为已核销" :label-width="formLabelWidth">
                      <el-input v-model="form.written_name" autocomplete="off" placeholder="请输入备注信息"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="Set_to_written_off_f" >取 消</el-button>
                    <el-button type="primary" @click="Set_to_written_off_t">确 定</el-button>
                  </div>
                </el-dialog>

<!-- 设为已取消 -->
                <el-button class="orders_button" type="primary" @click="dialogFormVisible5 = true" size="mini">设为已取消</el-button>
                <el-dialog title="确认提示" :visible.sync="dialogFormVisible5" width="30%" >
                  <el-form :model="form">
                    <el-form-item label="设为已取消" :label-width="formLabelWidth">
                      <el-input v-model="form.cancelled_name" autocomplete="off" placeholder="请输入备注信息" ></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="Set_to_cancelled_f" >取 消</el-button>
                    <el-button type="primary" @click="Set_to_cancelled_t">确 定</el-button>
                  </div>
                </el-dialog>
            </p>
        </div>
        <hr id="hr">
         <div id="orders_inf_header">
            <span>基本信息</span>
        </div>
        <div id="orders_inf_body">
          <table>
              <tr>
                <th>订单号 : </th>
                <td>222</td>
                <th>收货人 :</th>
                <td><el-link type="primary" @click="go_OrderUserDetails">小弟</el-link></td>
              </tr>
              <tr>
                <th>订单总金额 :</th>
                <td>222</td>
                <th>收货地址 :</th>
                <td>2222</td>
              </tr>
              <tr>
                <th>付款方式 :</th>
                <td>222</td>
                <th>收货手机 :</th>
                <td>2222</td>
              </tr>
              <tr>
                <th>客户 :</th>
                <td><el-link type="primary" @click="go_OrderUserDetails">小弟</el-link></td>
                <th>收货电话 :</th>
                <td>2222</td>
              </tr>
              <tr>
                <th>下单日期 :</th>
                <td>222</td>
                <th>物流信息 :</th>
                <td>2222</td>
              </tr>
              <tr>
                <th>付款时间 :</th>
                <td>222</td>
                <th>订单备注 :</th>
                <td>2222</td>
              </tr>
              <tr>
                <th>发货时间 :</th>
                <td>222</td>
                <th></th>
                <td></td>
              </tr>
          </table>
        </div>
        <div id="product_inf_herder">
          <span>商品信息</span>
        </div>
        <div id="product_inf_body">
          <table>
              <thead>
              <tr>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>商品总价</th>
              </tr>
            </thead>
            <tbody>
                <tr>
                  <td >商品名称</td>
                  <td>￥10.000.00</td>
                  <td>11</td>
                  <td>￥10.000.00</td>
                </tr>
            </tbody>
          </table>
        </div>
        <div id="product_cost">
          <ul>
            <li>运费:</li>
            <li>优惠:</li>
            <li>积分:</li>
            <li>订单金额:</li>
          </ul>
        </div>
    </el-card>
  </div>
</template>
<style lang="less" scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .flex{
    display: flex;
  }
  #orders_back{
    margin-bottom: 10px;
    display: flex;
    justify-content:flex-end;
  };
  #orders_header{
     display: flex;
     justify-content: space-between;
     height: 70px;
     line-height: 70px;
     border: rgb(233, 233, 233) solid 1px;
    text-align: left;
     .orders_details{
        font-family: "微软雅黑 Bold", "微软雅黑 Regular";
        font-weight:700 ;
        font-style: normal;
        font-size: 18px;
        text-align: left;
        line-height: 28px;
        margin-left: 20px;
     }
     .orders_payment{
        margin-left: 20px;
        font-size: 10px;
     }
     .orders_button{
        margin-right: 20px;
     }
  };
  
  #hr{
    margin: 15px 0;
    border: 1px solid #eeeff2;
    
  }
  #orders_inf_header{
  width: 100%;
  height: 50px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #333333;
  display: flex;
  background: #eeeff2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  span {
  padding-left: 20px;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #999999;
  // margin: 0 10px;
  }
}
#orders_inf_body{
  table{
  width: 100.01%;
  border-collapse: collapse;
    tr{
     th{
        height:40px;
        width:108px; 
        background: #eeeff2;
        font-size: 12px;
        color:  #333333;;
        border: 1px solid rgb(223, 225, 232);
     }
     td{
        border: 1px solid rgb(223, 225, 232);
        font-size: 12px;
        padding: 10px;
        text-align: left;
     }
    }
  }
}
#product_inf_herder{
  width: 100.01%;
  height: 50px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #333333;
  display: flex;
  background: #eeeff2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  span {
    padding-left: 20px;
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #999999;
  }
}
#product_inf_body{
  table{
      width: 100%;
      border-collapse: collapse;
      tr{
          th{
          height:40px;
          width:108px; 
          background: #eeeff2;
          font-size: 12px;
          color:  #333333;
          border: 1px solid rgb(223, 225, 232);
        }
        td{
            border: 1px solid rgb(223, 225, 232);
            height:40px;
            font-size: 12px;
            color:  #333333;
            a{
              text-decoration: none;
            }
        }
      }
  }
}
#product_cost{
  display: flex;
  justify-content:flex-end;
  ul{
    text-align: left;
    margin-right: 220px;
    margin-top: 30px; ;
    li{
      margin: 15px 0;
      list-style: none;
      font-size: 12px;
      color:  #333333;
    }
  }
}
</style>
<script>
export default {
  data(){
    return{
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      dialogFormVisible5: false,
      form: {
          paid_name: '',//已付款
          shipped_name: '',//已发货
          completed_name:'',//已完成
          writtenname:'', //已核销
          cancelled_name:'', //已取消
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '100px'
      };
  },
  methods:{
    back(){
      this.$router.push('productorder');
    },

// 设为已付款取消
     Set_to_paid_f(){
      this.form.paid_name = "";
      this.dialogFormVisible1=false;
     },
// 设为已付款确定
     Set_to_paid_t(){
      this.dialogFormVisible1=false;
    },

// 设为已发货取消
    Set_as_shipped_f(){
      this.form.shipped_name= "";
      this.dialogFormVisible2=false;
     },
// 设为已发货确定
    Set_as_shipped_t(){
       this.dialogFormVisible2=false;
    },

// 设为已完成取消
    Set_to_completed_f(){
      this.form.completed_name= "";
      this.dialogFormVisible3=false;
     },
// 设为已完成确定
    Set_to_completed_t(){
       this.dialogFormVisible3=false;
    },
    
// 设为已核销取消
    Set_to_written_off_f(){
      this.form.written_name = "";
      this.dialogFormVisible4=false;
     },
// 设为已核销确定
    Set_to_written_off_t(){
       this.dialogFormVisible4=false;
    },

// 设为已取消取消
    Set_to_cancelled_f(){
      this.form.cancelled_name = "";
      this.dialogFormVisible5=false;
     },
// 设为已取消确定
    Set_to_cancelled_t(){
       this.dialogFormVisible5=false;
    },

// 去订单用户的详细信息页面
    go_OrderUserDetails(){
      this.$router.push('orderUserDetails');
    }

  }
}
</script>